body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
}

#main {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#title {
    flex: 0 0 6%; 
    width: 100%; 
    background-color: #f0f0f0; 
    display: flex;
    align-items: center; 
    justify-content: center; 
}

#title p {
    margin: 0; 
}

#content-row {
    flex: 1;
    display: flex;
    width: 100%;
}

#left, #middle, #right {
    box-sizing: border-box; 
    padding: 10px; 
}

#left {
    flex: 0 0 30%; 
    background-color: #e0e0e0; 
}

#middle {
    flex: 0 0 40%; 
    background-color: #d0d0d0; 
}

#right {
    flex: 0 0 30%; 
    background-color: #c0c0c0; 
}


#left1, #left2, #left3,#right1, #right2, #right3{
	height: 32%;
	margin-bottom: 10px; 
	background-color: #ffffff; 
	border: 1px solid #cccccc; 
}

#middle1, #middle2{
    height: 50%;
    margin-bottom: 10px; 
    background-color: #ffffff; 
    border: 1px solid #cccccc; 
}